import { TabBar } from 'antd-mobile';
import {
  useHistory,
  useLocation,
} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  FileOutline,
  UserOutline,
} from 'antd-mobile-icons';
// 底部导航栏
const Bottom = () => {
  const history = useHistory()
  const location = useLocation()
  const { pathname } = location

  const setRouteActive = (value) => {
    history.push(value)
  }

  const tabs = [
    {
      key: '/',
      title: '首页',
      icon: <AppOutline />,
    }, 
    {
      key: '/public',
      title: '发布',
      icon: <MessageOutline />,
    },
    {
      key: '/collect',
      title: '收藏',
      icon: <FileOutline />,
    },

    {
      key: '/me',
      title: '个人中心',
      icon: <UserOutline />,
    },
  ]

  return (
    <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
      {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  )
}
export default Bottom;